<template>
  <view class="search_wrapper">
    <view class='searchGood'>
      <view class='search acea-row row-between-wrapper'>
        <view class='input acea-row row-between-wrapper'>
          <text class="navSearch"></text>
          <input type='text' :value='searchValue' :focus="focus" placeholder='点击搜索商品' placeholder-class='placeholder'
                 @input="setValue"></input>
        </view>
        <view class='bnt' @tap='searchBut'>搜索</view>
      </view>
      <!--      <view class='title'>热门搜索</view>-->
      <!--      <view class='list acea-row'>-->
      <!--        <block v-for="(item,index) in hotSearchList" :key="index">-->
      <!--          <view class='item' @tap='setHotSearchValue(item.title)'>{{ item.title }}</view>-->
      <!--        </block>-->
      <!--      </view>-->
      <view class='line'></view>
      <goodList :bastList="bastList" v-if="bastList.length > 0"></goodList>
    </view>
    <view class='noCommodity'>
      <view class='pictrue' v-if="bastList.length===0">
        <image src='/static/None/None_shopping.png'></image>
        <text>暂无商品喔~</text>
      </view>
      <!--      <recommend :hostProduct='hostProduct' v-if="bastList.length == 0"></recommend>-->
    </view>
    <u-loadmore
        v-if="bastList.length>0"
        :status="status"
        :icon-type="iconType"
        :load-text="loadText"
        @loadmore="loadNextFn"
    />
  </view>
</template>

<script>
// import {
// 	getSearchKeyword,
// 	getProductslist,
// 	getProductHot
// } from '@/api/store.js';
import goodList from '@/components/goodList';
import recommend from '@/components/recommend';
import {getShopPing} from "@/api/shopping";

export default {
  components: {
    goodList,
    recommend
  },
  onLoad(option) {
    this.searchValue = option.searchValue || ''
  },
  data() {
    return {
      toggle: false,
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
      hostProduct: [],
      searchValue: '',
      focus: true,
      bastList: [],
      hotSearchList: [],
      first: 0,
      limit: 8,
      page: 1,
      loading: false,
      loadend: false,
      loadTitle: '加载更多',
      hotPage: 1,
      isScroll: true,
      isbastList: false,
      params: {
        current: 1,
        size: 10,
        categoryId: '', //商品类型id
        channelId: 1, //商品分栏 1->普通商品；2->礼包；3->积分兑换
        prodName: '' //商品名称
      },
      userInfoServer:'',
    };
  },
  onShow: function () {
    // this.getHostProduct();
    this.userInfoServer = uni.getStorageSync("userInfoServer");
    this.searchFn()
  },
  //上拉
  onReachBottom() {
    this.searchFn();
  },
  methods: {
    //点击组件触发上拉加载
    loadNextFn() {
      this.searchFn();
    },


    //搜索
    async searchFn() {
      const params = {
        ...this.params,
        prodName: this.searchValue
      }
      const res = await getShopPing(params)
      if (res.code === 0) {
        this.bastList.push(...res.data.records);

        this.bastList.forEach((item) => {
          const CommissionToggle =
              this.userInfoServer.roleId === 1
                  ? item.uniteCommission
                  : this.userInfoServer.roleId === 2
                      ? item.partnerCommission
                      : this.userInfoServer.roleId === 3
                          ? item.facilitatorCommission
                          : this.userInfoServer.roleId === 4
                              ? item.shopkeeperCommission
                              : "";
          if (CommissionToggle && CommissionToggle > -1) {
            item.CommissionToggle = CommissionToggle
          } else {
            item.CommissionToggle = '0'
          }
        });
        console.log(this.bastList,'bastList')


        if (res.data.records.length === 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }

        if (res.data.records.length >= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }

        if (this.bastList.length <= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
            res.data.records.length !== 0 &&
            res.data.records.length < this.params.size
        ) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }

      }
    },


    getProductList: function () {
      let that = this;
      if (that.loadend) return;
      if (that.loading) return;
      that.loading = true;
      that.loadTitle = '';
      // getProductslist({
      // 	keyword: that.searchValue,
      // 	page: that.page,
      // 	limit: that.limit
      // }).then(res => {
      // 	let list = res.data.list,
      // 		loadend = list.length < that.limit;
      // 	that.bastList = that.$util.SplitArray(list, that.bastList);
      // 	that.$set(that,'bastList',that.bastList);
      // 	that.loading = false;
      // 	that.loadend = loadend;
      // 	that.loadTitle = loadend ? "😕人家是有底线的~~" : "加载更多";
      // 	that.page = that.page + 1;
      // 	that.isbastList = true;
      // }).catch(err => {
      // 	that.loading = false,
      // 	that.loadTitle = '加载更多'
      // });
    },
    setHotSearchValue: function (event) {
      this.$set(this, 'searchValue', event);
      this.page = 1;
      this.loadend = false;
      this.$set(this, 'bastList', []);
      this.getProductList();
    },
    setValue: function (event) {
      this.$set(this, 'searchValue', event.detail.value);
    },
    searchBut: function () {
      let that = this;
      that.focus = false;
      if (that.searchValue.length > 0) {
        that.$set(that, 'bastList', []);
        uni.showLoading({
          title: '正在搜索中'
        });
        this.params.current = 1
        this.params.size = 10
        that.searchFn();
        uni.hideLoading();
      } else {
        return this.$util.Tips({
          title: '请输入要搜索的商品',
          icon: 'none',
          duration: 1000,
          mask: true,
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #fff !important;
}

.searchGood .search {
  padding-left: rpx(15);
  background-color: #fff !important;
}

.searchGood .search {
  padding-top: rpx(10);
  display: flex;
}

.searchGood .search .input {
  width: rpx(299);
  background-color: #f7f7f7;
  border-radius: rpx(16.5);
  padding: 0 rpx(17.5);
  box-sizing: border-box;
  height: rpx(33);
  display: flex;
  align-items: center;
}

.searchGood .search .input input {
  width: rpx(236);
  font-size: rpx(13);
}

.searchGood .search .input .placeholder {
  color: #bbb;
}

.searchGood .search .input .iconfont {
  color: #000;
  font-size: rpx(17.5);
}

.searchGood .search .bnt {
  width: rpx(60);
  text-align: center;
  height: rpx(33);
  line-height: rpx(33);
  font-size: rpx(15);
  color: #282828;
}

.searchGood .title {
  font-size: rpx(14);
  color: #999;
  margin: rpx(25) rpx(15) rpx(12.5) rpx(15);
}

.searchGood .list {
  padding-left: rpx(5);
}

.searchGood .list .item {
  font-size: rpx(13);
  color: #454545;
  padding: 0 rpx(10.5);
  height: rpx(30);
  border-radius: rpx(15);
  line-height: rpx(30);
  border: rpx(1) solid #aaa;
  margin: 0 0 rpx(10) rpx(10);
}

.searchGood .line {
  border-bottom: rpx(1) solid #eee;
  margin: rpx(10) rpx(15) 0 rpx(15);
}


.navSearch {
  background-image: url("../../../static/images/search.png");
  background-size: rpx(16) rpx(16);
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: rpx(8);
  width: rpx(16);
  height: rpx(16);
}

.search_wrapper {
  background: #fff;
  min-height: 100vh;
}

.noCommodity {
  > .pictrue {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    > image {
      width: rpx(222);
      height: rpx(158);
      vertical-align: middle;
    }

    > text {
      font-size: rpx(13);
      font-weight: 400;
      color: #B2B2B2;
    }
  }
}

</style>
